import { MailOutlined, SettingOutlined, AppstoreOutlined, PieChartOutlined, DesktopOutlined  } from '@ant-design/icons';
import { Menu } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
const items = [
    getItem('首页', '/home', <PieChartOutlined />),
    getItem('访客记录', 'sub1', <MailOutlined />, [
        getItem('访客列表', '/home/Guestlist'),
        getItem('访客添加修改', '/home/Guestfunction'),
        getItem('负责人操作导入详细', '/home/Responsibleperson'),
    ]),
    getItem('部门管理', 'sub2', <AppstoreOutlined />, [
        getItem('部门列表', '5'),
        getItem('部门添加修改', '6'),
    ]),
    getItem('管理员', 'sub3', <SettingOutlined />, [
        getItem('管理员列表', '7'),
        getItem('管理员添加修改', '8'),
    ]),
    getItem('核销人员管理', 'sub4', <DesktopOutlined />, [
        getItem('核销人员列表', '9'),
        getItem('核销人员添加修改', '10'),
        getItem('核销人员日志', '11'),
    ]),
    getItem('审核日志', 'sub5', <DesktopOutlined />, [
        getItem('核销人员列表', '12'),

    ]),
    getItem('校园动态', 'sub6', <DesktopOutlined  />, [
        getItem('核销人员列表', '15'),
        getItem('核销人员添加修改', '16'),
        getItem('核销人员日志', '17'),
    ]),
    getItem('系统设置', '18', <DesktopOutlined />),
];

// submenu keys of first level
const rootSubmenuKeys = ['sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6'];
const Leftborder = () => {
    const navigate =useNavigate()
    const [openKeys, setOpenKeys] = useState(['/home']);
    const onOpenChange = (keys) => {
        const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };
    return (
        <Menu
            mode="inline"
            openKeys={openKeys}
            onOpenChange={onOpenChange}
            style={{
                width: 200,
                height: "100vh",
                background: "rgb(48, 65, 86)",
                color:"#BFCBD9"

            }}
            items={items}

            onSelect={(e)=>{
                console.log(e);

                navigate(e.keyPath[0])
            }}
        />
    );
};
export default Leftborder;